<template>
    <div class="x">
        <div class="gexx">
            <div class="nclog">
                <div style="width: 120px; height: 120px;margin-top: 20px;">
                    <img src="/-1649995914.jpg" alt="" style="border-radius: 50%;" width="100%" height="100%" />
                </div>
                <p style="padding: 30px 0 10px 0px;color: #000;font-size: 30px;">
                    weizhanji
                </p>
            </div>

            <div class="nr2">
                <div>
                    文章
                    <br />
                    12
                </div>
                <div>
                    收藏
                    <br />
                    34
                </div>
                <div>
                    关注
                    <br />
                    1
                </div>
                <div>
                    粉丝
                    <br />
                    3000
                </div>
                <!-- <div @click="dj(4)" style="border-left: 5px solid #ff4a4a; color: #ff4a4a;">
					收藏
					<br />
					34
				</div> -->
            </div>

            <!-- <div class="kffk">
                <div style="color: #99f5ff;">
                    客服反馈联系电话
                </div>
                <div>
                    +86 138 3838 4381
                </div>
                <div>
                    需要帮助吗？
                </div>
            </div> -->
        </div>



        <div class="grzxnr">
            <div style="padding: 15px 30px;flex: 1; border-bottom: 10px solid #eeeeee;">
                <p style="font-size: 20px;">我的服务</p>
                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                    <div class="wodefuwu">
                        <p>
                            <img src="/zb.png" style="width: 30px;height: 30px;" />
                            <i>直播</i>
                        </p>
                        <p>
                            <img src="/sp.png" style="width: 30px;height: 30px;" />
                            <i>视频</i>
                        </p>
                        <p>
                            <img src="/zj.png" style="width: 30px;height: 30px;" />
                            <i>足迹</i>
                        </p>
                        <p>
                            <img src="/fx.png" style="width: 30px;height: 30px;" />
                            <i>分享</i>
                        </p>
                    </div>
                    <div class="wodezhuye">
                        <p>我的主页></p>
                    </div>
                </div>
                <div class="wodefuwu1">
                    <p>
                        <img src="/rz.png" style="width: 30px;height: 30px;" />
                        <i>传承人认证</i>
                    </p>
                    <p>
                        <img src="/zxkf.png" style="width: 30px;height: 30px;" />
                        <i>在线客服</i>
                    </p>
                    <p>
                        <img src="/yjfk.png" style="width: 30px;height: 30px;" />
                        <i>意见反馈</i>
                    </p>
                </div>
            </div>
            <div class="scnr">
                <p class="fabu">
                    我发布的</p>
                <div class="jg">
                    <span class="scnr1">
                        <div style="width: 100%; height: 80%;padding: 0 0 10px 0;">
                            <img src="/WPS图片(1).jpg" alt="" width="100%" height="100%" />
                        </div>
                        <div>
                            据传这一表演叫仙女下凡，源于何仙姑与蓝采和两位仙人来到人间游玩，看到人间很是有趣，流连忘返，不想返回天上......
                        </div>
                    </span>
                    <span class="scnr1">
                        <div style="width: 100%; height: 80%;">
                            <img src="/WPS图片(2).png" width="100%" height="100%" />
                        </div>
                        <div>
                            搂腰翻滚
                            搂腰翻滚演绎铁拐李汉钟离过海的神通，描绘八仙变成各类动物的神通，活灵活现地模仿动物的，并用以山歌解释表演。......
                        </div>
                    </span>
                    <span class="scnr1">
                        <div style="width: 100%; height: 80%;">
                            <img src="/WPS图片(3).png" alt="" width="100%" height="100%" />
                        </div>
                        <div>
                            斑鸠饮水
                            山歌唱着“韩湘子与曹国舅变成了一对好斑鸠，渡在杆中齐饮水，后来站在杆（杠）中游”，从歌词可以看出两位......
                        </div>
                    </span>
                </div>
                <div class="jg">

                    <span class="scnr1">
                        <div style="width: 100%; height: 80%;">
                            <img src="/WPS图片(4).png" alt="" width="100%" height="100%" />
                        </div>
                        <div>
                            大树翻根
                            大树翻根的表演也叫仙女下凡歌手唱到“何仙姑与蓝采和，舞艺大齐总不差，名为大树翻根舞，各取手绢各取花......
                        </div>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
</script>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'HomeView',
        components: {
            HelloWorld
        },
        data() {
            return {
                bs: 1
            }
        },
        methods: {
            // dj(val) {
            // 	console.log(val)
            // 	this.bs = val
            // }
        },
    }
</script>

<style>
    .fabu {
        width: 13%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }

    .wodefuwu1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 38%;
        padding-top: 20px;
    }

    .wodefuwu1 p {
        display: flex;
        flex-direction: column;
        display: flex;
        align-items: center;
        width: 100px;
    }

    .wodezhuye {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 50px;
        color: #ff4a4a;
    }

    .wodefuwu {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 50%;
        padding-top: 50px;
    }

    .wodefuwu p {
        display: flex;
        flex-direction: column;
    }

    .x {
        display: flex;
        flex-direction: row;
        /* background-color: bisque; */
        padding: 0 0px;
        margin: 0 100px;
        height: 100%;
    }

    .el-card__body,
    .el-main {
        margin: 0;
        padding: 0;
    }

    .gexx {
        display: flex;
        flex-direction: column;
        margin: 0 10px 0 0;
        width: 20%;
        height: 100ch;
        background-color: #fff;
        position: fixed;
    }

    .grzxnr {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        /* margin: 0 10px 0 0; */
        width: 80%;
        height: 100ch;
        background-color: #fff;
        color: #000;
        overflow-y: scroll;
        margin-left: 24%;
    }

    .nr2 {
        /* margin: 0 0px 80px 0; */
        /* padding: 20px 0; */
    }

    .nr2 div {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: 50px;
        border-left: 5px solid #ffffff;
        color: #4f4f4f;
        font-size: 17px;
    }

    .nclog {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bs1 {
        border-left: 5px solid #ff4a4a;
    }

    .scnr {
        /* display: flex; */
        flex-direction: column;

        width: 100%;
        height: 100%;
    }

    .scnr1 {
        margin: 10px 30px;
        height: 300px;
        width: 300px;
        background-color: #f0f0f0;
        border-radius: 2%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
        padding-bottom: 20px;
    }

    .jg {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        /* margin: 70px 0; */
        /* padding-top: 50px; */
        width: 100%;
        height: 300px;
        margin-top: 30px;
        /* background-color: #ff4a4a; */

    }

    .kffk {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        color: #cccccc;
        padding: 0px 0 230px 0;
    }

    .kffk div {
        padding: 5px 0;
    }
</style>